<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top: 20px">
      <el-row :gutter="20">
        <el-col :span="8">
          <!-- 搜索 -->
          <div>
            <el-input
              placeholder="请输入内容"
              class="input-with-select"
              v-model="orders.query"
              clearable
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="ss(orders.query)"
              ></el-button>
            </el-input></div
        ></el-col>
        <!-- 添加 -->
        <el-col :span="12"> </el-col>
      </el-row>

      <el-table :data="tableData" border style="width: 100%" class="mt15">
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="order_number" label="订单编号"> </el-table-column>
        <el-table-column prop="order_price" label="订单价格"> </el-table-column>
        <el-table-column label="是否付款">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.pay_status == 0">未付款</el-tag>
            <el-tag type="success" v-if="scope.row.pay_status == 1">已付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货"> </el-table-column>
        <el-table-column label="下单时间">
          <template slot-scope="scope">
            {{ scope.row.create_time | time }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="dialogVisible=true"></el-button>
            <el-button
              type="success"
              icon="el-icon-location-outline"
              size="mini"
              @click="hq(scope.row.user_id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="orders.pagenum"
        :page-sizes="[3, 5, 8, 10]"
        :page-size="orders.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="mt15"
      >
      </el-pagination>
    </el-card>

    <el-dialog
  title="修改地址"
  :visible.sync="dialogVisible"
  width="50%"
  :before-close="handleClose">
  <span>
 <el-form label-width="100px">
     <el-form-item label="省市区/县">
         <el-cascader
               ref='goodsTwoCateRef'  
              :options="cityOptions"
              :props="defaultProps"
              @change="handleChange"
             clearable
            ></el-cascader>
     </el-form-item>
      <el-form-item label="详细地址">
    <el-input v-model="name"></el-input>
  </el-form-item>
 </el-form>

  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>



    <el-dialog
  title="物流进度"
  :visible.sync="dialogVisible1"
  width="50%"
  :before-close="handleClose">
  <span>
<el-timeline :reverse="reverse">
        <el-timeline-item
          v-for="(item, index) in wuLiuData"
          :key="index"
         :color="item.color"
         :icon='item.icon'
          :timestamp="item.time"
        >
          {{ item.context }}
        </el-timeline-item>
      </el-timeline>

  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible1  = false">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import _ from "lodash";
import cityOptions from '../../provinces-china-master/city_data2017_element.js'
import WuLiu from "@/mock/wuliu";
export default {
  data() {
     //处理一下物流返回的样式
      WuLiu.data.forEach((item,index) => {
          if(index===0) {
              item.icon='el-icon-s-flag'
              item.color='#ff0000'
              item.size='large'
              item.type='success'
          }
      });

      console.log('WuLiu.data:',WuLiu.data)
    return {
       reverse: false,
      wuLiuData: WuLiu.data,
        name:"",
        cityOptions:cityOptions,
        dialogVisible: false,
        dialogVisible1: false,
      total: 0, //总条数
      tableData: [], //表格数据
      orders: {
        query: "", //搜索
        pagenum: 1, //当前页码
        pagesize: 5, //每页条数
        user_id: "", //用户id
        pay_status: "", //支付状态
        is_send: "", //是否发货
      },
        defaultProps: {
        expandTrigger: "hover",
        label: "label",
        children: "children",
        value: "value",
         
      },
    };
  },

  components: {},
  methods: {
      hq(id){
          this.dialogVisible1=true;
        
      },
    ss: _.debounce(function () {
      this.getdata();
    }, 300),
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.orders.pagesize = val;
      this.getdata();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.orders.pagenum = val;
      this.getdata();
    },
    //   数据列表
    getdata() {
      this.$API.orderstAPI(this.orders).then((res) => {
        console.log("123qwe", res);
        this.tableData = res.goods;
        this.total = res.total;
      });
    },
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleChange() {
        // this.$refs.goodsTwoCateRef.dropDownVisible=false;
      console.log("商品分类级联选择器改变时触发");
    },
  },
  mounted() {
    this.getdata();
  },

  computed: {},

  watch: {
    cart: {
      handler(newValue) {},
      deep: true,

      immediate: true,
    },
  },
};
</script>
<style>
.el-cascader{
    width: 100%;
}
</style>

<style scoped lang="scss"></style>
